小弟我沒有把握能把程式邏輯或內容撰寫完全正確,因此偵錯功能相當重要,偵錯個人認為至少有下列兩項優點
- 當程式執行結果不如預期,利用逐步或設立中斷點來觀察程式輸出內容。
- 當程式不能順利運行時,可利用上述方式與終端機(Terminal)內容來進行處理。
上述也是直譯式語言最大優點,不用完整程式碼經過編譯後才能執行偵錯,那下列就來說明如何在 VSCODE 設定偵錯吧~~
新增偵錯文件
- 在 VSCODE 左方工具列中選擇 Run and Debug (Ctrl + Shift + D)
點選 Run and Debug
修改偵錯文件內容
- url: 調整了 Port ,這部分需要對應 Vue 使用 Port
- webRoot: 網頁根目錄
- sourceMapPathOverrides: 相關程式轉譯路徑連結
- sourceMaps: 程式轉譯連結
內容如下// .vscode/launch.json { // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "vuejs: chrome", "url": "http://localhost:5555", "webRoot": "${workspaceFolder}/src", "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" }, "sourceMaps": true, } ] }